<template>
  <div>
    <CustomDialog
      title="新增/编辑商铺"
      width="900px"
      :visible.sync="isShowDialog"
      @closed="handleCloseDialog"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-position="left"
        hide-required-asterisk
      >
        <div class="h1 mt-0">基本信息</div>
        <!-- 商铺标题 -->
        <el-form-item label="" prop="name" class="row-all">
          <template #label>
            <div class="form-label required">商铺标题</div>
          </template>
          <el-input v-model="form.name" placeholder="20字以内文字描述"></el-input>
        </el-form-item>
        <!-- 面积 -->
        <el-form-item label="" prop="area" class="row-left">
          <template #label>
            <div class="form-label required">面积</div>
          </template>
          <el-input v-model="form.area" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">平米</div>
          </el-input>
        </el-form-item>
        <!-- 租售类型 -->
        <el-form-item prop="rentOrSale" class="row-right">
          <template #label>
            <div class="form-label required">租售类型</div>
          </template>
          <el-select v-model="form.rentOrSale" class="w-full">
            <el-option
              v-for="item in rentOrSaleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 租金 -->
        <el-form-item label="" prop="rent" class="row-left">
          <template #label>
            <div class="">租金</div>
          </template>
          <el-input
            v-model="form.rent"
            type="number"
            placeholder="请输入"
            :disabled="form.rentOrSale === '2'"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米*月</div>
          </el-input>
        </el-form-item>
        <!-- 售价 -->
        <el-form-item label="" prop="price" class="row-right">
          <template #label>
            <div class="">售价</div>
          </template>
          <el-input
            v-model="form.price"
            type="number"
            placeholder="请输入"
            :disabled="form.rentOrSale === '1'"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米</div>
          </el-input>
        </el-form-item>
        <!-- 商铺标签 -->
        <el-form-item prop="tags" class="row-all">
          <template #label>
            <div class="">商铺标签</div>
          </template>
          <el-select
            v-model="form.tags"
            class="w-full"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="可选择或自定义标签"
          >
            <el-option
              v-for="item in shopTagOptions"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 商铺地址 -->
        <el-form-item label="" prop="addrs" class="row-left mb-4">
          <template #label>
            <div class="">商铺地址</div>
          </template>
          <el-input v-model="form.addrs" readonly placeholder="点击右侧按钮在地图上选点">
            <i
              slot="suffix"
              class="el-icon-location-outline text-2xl pr-1 pt-[4px] cursor-pointer"
              @click="isShowMap = true"
            />
          </el-input>
        </el-form-item>
        <!--商铺介绍 -->
        <el-form-item label="" prop="desc" class="row-all">
          <template #label>
            <div>商铺介绍</div>
          </template>
          <el-input
            v-model="form.desc"
            type="textarea"
            :rows="3"
            maxlength="300"
            show-word-limit
            placeholder="300字以内文字描述"
          ></el-input>
        </el-form-item>
        <!-- 多媒体资料 -->
        <div class="h1">多媒体资料</div>
        <!-- 图片 -->
        <el-form-item label="" prop="imgList" class="row-all">
          <template #label>
            <div>图片</div>
          </template>
          <CustomUpload :img-list.sync="form.imgList" />
        </el-form-item>
        <!-- 视频 -->
        <el-form-item label="" prop="videoList" class="row-all">
          <template #label>
            <div>视频</div>
          </template>
          <VideoUpload :img-list.sync="form.videoList" />
        </el-form-item>
        <!-- VR全景 -->
        <el-form-item label="" prop="vrLink" class="row-all">
          <template #label>
            <div>VR全景</div>
          </template>
          <el-input v-model="form.vrLink" placeholder="粘贴全景链接"></el-input>
        </el-form-item>
        <!-- 详细信息 -->
        <div class="h1">详细信息</div>
        <!-- 商铺层数 -->
        <el-form-item label="" prop="floor" class="row-left">
          <template #label>
            <div class="form-label">商铺层数</div>
          </template>
          <el-input v-model="form.floor" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">层</div>
          </el-input>
        </el-form-item>
        <!-- 商铺层高 -->
        <el-form-item label="" prop="height" class="row-right">
          <template #label>
            <div class="form-label">商铺层高</div>
          </template>
          <el-input v-model="form.height" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">米</div>
          </el-input>
        </el-form-item>
        <!-- 商铺面宽 -->
        <el-form-item label="" prop="width" class="row-left">
          <template #label>
            <div class="form-label">商铺面宽</div>
          </template>
          <el-input v-model="form.width" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">米</div>
          </el-input>
        </el-form-item>
        <!-- 商铺进深 -->
        <el-form-item label="" prop="deep" class="row-right">
          <template #label>
            <div class="form-label">商铺进深</div>
          </template>
          <el-input v-model="form.deep" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">米</div>
          </el-input>
        </el-form-item>
        <!-- 商铺朝向 -->
        <el-form-item prop="direction" class="row-left">
          <template #label>
            <div class="form-label">商铺朝向</div>
          </template>
          <el-select v-model="form.direction" class="w-full">
            <el-option
              v-for="item in directionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 招商需求 -->
        <div class="h1">招商需求</div>
        <!-- 意向产业 -->
        <el-form-item label="" prop="intendedIndustry" class="row-all">
          <template #label>
            <div class="form-label">意向产业</div>
          </template>
          <el-cascader
            id="industry"
            ref="industry"
            v-model="form.intendedIndustry"
            class="w-full"
            clearable
            filterable
            placeholder="招商意向产业，支持模糊搜索、选择"
            :options="industryTree"
            :props="{
              checkStrictly: true,
              multiple: true,
              value: 'code',
              label: 'name',
            }"
            @change="handleIndustryChange"
          ></el-cascader>
        </el-form-item>
        <!-- 联系人 -->
        <div class="h1">联系方式</div>
        <el-form-item label="" prop="contacts" class="row-all">
          <template #label>
            <div>联系人</div>
          </template>

          <div class="flex space-x-2 mb-2">
            <el-input v-model="form.contacts[0].name" placeholder="请输入" class="w-4/12" />
            <el-input v-model="form.contacts[0].phone" class="w-5/12" placeholder="输入联系方式" />
            <el-button type="text" @click="handleAddContacts">+新增联系人</el-button>
          </div>

          <div
            v-for="(item, index) in form.contacts.slice(1)"
            :key="index"
            class="flex space-x-2 mb-2"
          >
            <el-input v-model="item.name" placeholder="请输入" class="w-4/12" />
            <el-input v-model="item.phone" class="w-5/12" placeholder="输入联系方式" />
            <i
              class="el-icon-remove-outline text-xl cursor-pointer flex items-center"
              @click="handleDelContacts(index)"
            ></i>
          </div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="rounded-content-wrap" @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" class="rounded-content-wrap" @click="handleOk">确 定</el-button>
      </span>
    </CustomDialog>

    <PositionPicker
      :visible.sync="isShowMap"
      :position.sync="form.position"
      :addrs.sync="form.addrs"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import CustomUpload from '../common/CustomUpload/index.vue'
import VideoUpload from '../common/CustomUpload/videoUpload.vue'
import CustomDialog from '../common/CustomDialog/index.vue'
import PositionPicker from '../common/CustomAMap/PositionPicker.vue'
import { rentOrSaleOptions, directionOptions, shopTagOptions } from '../common/dictionary'
import addEditMixin from '../common/addEditMixin'
const selectKey = [
  { key: 'rentOrSale', options: 'rentOrSaleOptions' },
  { key: 'direction', options: 'directionOptions' },
]

const treeKey = [{ key: 'intendedIndustry', refName: 'industry' }]

export default Vue.extend({
  components: { CustomUpload, CustomDialog, PositionPicker, VideoUpload },
  mixins: [addEditMixin({ selectKey, treeKey, templateName: 'B_CONSOLE_SHOP' })],
  data() {
    return {
      form: {
        name: null,
        area: null,
        rentOrSale: null,
        rent: null,
        price: null,
        tags: [],
        position: null,
        addrs: null,
        desc: null,
        imgList: [],
        videoList: [],
        vrLink: null,
        floor: null,
        height: null,
        width: null,
        deep: null,
        direction: null,
        intendedIndustry: [],
        contacts: [{ name: '', phone: '' }],
      },
      rules: {
        name: [
          { required: true, message: '请输入商铺标题', trigger: 'blur' },
          { min: 3, max: 20, message: '长度为3~20个字符', trigger: 'blur' },
        ],
        area: [{ required: true, message: '请输入商铺面积', trigger: 'blur' }],
        rentOrSale: [{ required: true, message: '请选择租售类型', trigger: 'change' }],
        addrs: [{ required: true, message: '请选择商铺地址', trigger: 'blur' }],
      },
      rentOrSaleOptions,
      directionOptions,
      shopTagOptions,
    }
  },
})
</script>
<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
